<!--有选择按钮表格-->
<template>
    <div class='tableEdit' :style="heights">
        
        <el-table
            :data="dataNew[dataField]"
            class='tablesss'
            height="100%"
            border
            style="width: 100%;">
            <el-table-column
               v-for="(item,index) in listNew" :key="index"
                :label="item.label"
               :width='item.width.replace("width:","")' >
                 <template slot-scope="scope">
                    <input-noborder :id="item.id" :dataField="dataField" ref="inputs" :data="dataNew" :fontSize="item.fontSize" :exdata="scope.$index" :extype="item.extype" :exkey="item.exkey" @input="tableChangeData"  :isreadonly="item.isReadOnly"  v-if="item.type=='text'" isNotSave="Y"></input-noborder>
                    <input-select :attribute="item"  isBorder="N" :dataField="dataField"  :index="scope.$index" :fontSize="item.fontSize"  :data="dataNew"  @input="tableChangeData" v-if="item.type=='select'" ></input-select>
                
                    <input-date :id="item.id"   isBorder="N" :dataField="dataField"  styles="width:100%" :fontSize="item.fontSize"  :index="scope.$index"  :data="dataNew"  @input="tableChangeData" v-if="item.type=='date'"></input-date>

                </template>
            </el-table-column>
            <el-table-column
            label="操作"
            v-if="lineButtons.length>0"
            :width='lineButtons[0].width.replace("width:","")'
           >
               <template slot-scope="scope">
                    <el-button type="primary" size="small" v-for="(item,index) in lineButtons" :key="index" @click="openWinEdit(item,scope.$index)">{{item.label}}</el-button>
                   
               </template>
            </el-table-column>
           <el-table-column
            label="删除"
            width="60"
            v-if="isDel!='N'"
           >
               <template slot-scope="scope">
                   <el-tooltip content="点击删除该服务项目" placement="top">
                        <i class='fa fa-times' style='cursor:pointer' @click="removeItem(scope.$index)" ></i>
                    </el-tooltip>
                   
               </template>
            </el-table-column>
        </el-table>
        <!--table cellspacing=0 cellpadding=0>
            <colgroup>
                <col v-for="(item,index) in listNew" :key="index" :style='item.width'/>
                <col style='width:18px'/>
            </colgroup>
            <tr>
                <th v-for="(item,index) in listNew" :key="index">
                    {{item.label}}
                </th>
                <th>&nbsp;</th>
            </tr>
            <tr v-for="(item,index) in data[dataField]" :key="index">
                <td v-for="(field,index2) in listNew" :key="index2">
                    <input-noborder :id="field.id" :dataField="dataField" ref="inputs" :data="data" :exdata="index" :extype="field.extype" :exkey="field.exkey" @input="tableChangeData"  :isreadonly="field.isReadOnly"  v-if="field.type=='text'"></input-noborder>
                    <input-select :id="field.id"  :dataField="dataField" styles="width:100%" :options="field.dataSource" :index="index"   :data="data"  @input="tableChangeData" :isreadonly="field.isReadOnly" v-if="field.type=='select'" ></input-select>
                    <input-date :id="field.id"   :dataField="dataField"  styles="width:100%"  :index="index"  :data="data"  @input="tableChangeData" v-if="field.type=='date'"></input-date>

                </td>
                <td style='text-align:center;color:red'><i class='fa fa-times' style='cursor:pointer' @click="removeItem(index)"></i></td>
            </tr>
            
        </table-->
        

    </div>
    
</template>
<script>

import inputNoborder  from '../input/input-noborder'
import inputSelect from '../input/input-select'
import inputDate from '../input/input-date'
import inputButtonSelect from '../input/input-button-select'
export default {
    props:['dataField','listField','data','heights','isreadonly','appid','isDel','groupKey','groupNum','groupAmt','groupTotalAmt','total'],
    name: "table-edit",
    components: {
       inputNoborder,
       inputSelect,
       inputDate,
       inputButtonSelect,
    },
    data(){
        return{
            buttons:[],
            listNew:[],
            lineButtons:[],
            dataIndex:-1,
            dataType:"",//pre
            dataTemp:{},
            data_exkey:{},
            dataNew:{},
            temp:{}
        }
    },
    created(){
        this.buttons=[];
        this.listNew=[];
        this.lineButtons=[];
        for(let i=0;i<this.listField.length;i++){

            if(this.listField[i].type=="inputButtonSelect"){
                this.buttons.push(this.listField[i])
            }else if(this.listField[i].type=="inputLineButton"){
                this.lineButtons.push(this.listField[i]);
            }else{
                this.listNew.push(this.listField[i])
            }
        }
        this.initData(); 
        try{
            this.$parent.$el.parentNode.parentNode.style.overflow="hidden";
            this.$parent.$el.parentNode.parentNode.style.flexDirection="column";
            this.$parent.$el.parentNode.parentNode.style.flexWrap="nowrap";
            this.$parent.$el.parentNode.style.flexDirection="column";
            this.$parent.$el.parentNode.style.flex="1";
            this.$parent.$el.parentNode.style.display="flex";
            
            /*this.$parent.$el.parentNode.style.flexWrap="nowrap";*/
            this.$parent.$el.style.flex="1";

            let height=this.$parent.$parent.$el.clientHeight;
        }catch(e){}
         
        
         
    }, 
    methods:{
        initData(){
            let temp=JSON.parse(JSON.stringify(this.data[this.dataField]));
            this.temp={};
            for(let i=0;i<temp.length;i++){
                let groupKey=temp[i][this.groupKey];
                let groupNum=temp[i][this.groupNum];
                let groupAmt=temp[i][this.groupAmt];
                let totals=temp[i][this.total];
                if(totals){
                    try{
                        totals=Number(totals);
                    }catch(e){totals=0}
                }else{
                    totals=0;
                }
                
                let temp_={};
                let num=0;
                let total_=0;
                if(this.temp[groupKey+groupAmt]){
                    temp_=this.temp[groupKey+groupAmt];
                    num=Number(temp_[this.groupNum]);
                    if(temp_[this.total])
                    total_=Number(temp_[this.total]);
                }else{
                    temp_=temp[i];
                }
                num=num+Number(groupNum);
                total_=total_+totals;
                
                let totalAmt=num*Number(groupAmt);
                temp_[this.groupTotalAmt]=totalAmt;
                temp_[this.groupNum]=num;
                temp_[this.total]=total_;
                this.temp[groupKey+groupAmt]=temp_;
            }
            this.dataNew={};
            let dataNew=[];
            for(let key in this.temp){
                dataNew.push(this.temp[key])
            }
            this.dataNew[this.dataField]=dataNew;
        },
        changeAmt(exdata){
            let exkey="";
            let extype="";
            let num=0;
            let amt=0;
            let total_amt=0;
            let total_amt_key="";
            for(let i=0;i<this.listField.length;i++){
                let _id=this.listField[i].id;
                let exkey_=this.listField[i].exkey;
                let extype_=this.listField[i].extype;
                if(exkey_){
                    exkey=exkey_;
                }
                if(extype_=="num"){
                    num=this.data[this.dataField][exdata][_id];
                }else if(extype_=="amt"){
                    amt=this.data[this.dataField][exdata][_id];
                }else if(extype_=="total_amt")
                    total_amt_key=_id;
            }
            if(total_amt_key){
                total_amt=num*amt;
                let data_=this.data[this.dataField][exdata];
                data_[total_amt_key]=total_amt;
                this.$set(this.data[this.dataField],exdata,data_);
                //this.setData(exdata,total_amt_key,total_amt);

            }

            total_amt=0;
            for(let i=0;i<this.data[this.dataField].length;i++){
                total_amt+=Number(this.data[this.dataField][i][total_amt_key])
            }
            if(exkey){
                let data_={};
                let ids=exkey.split(".");
                let p=ids[0];
                let id_=ids[1];
                data_.pre=p;
                data_.val=total_amt;
                data_.id=id_;

                this.$set(this.data[pre],id_,total_amt);
                
                //this.$emit("input",JSON.stringify(data_));

            }
        },
        changeTotalAmt(){

            let total_amt_key="";
            let exkey="";
            for(let i=0;i<this.listField.length;i++){
                let _id=this.listField[i].id;
                let exkey_=this.listField[i].exkey;
                let extype_=this.listField[i].extype;
                if(exkey_){
                    exkey=exkey_;
                }
                if(extype_=="total_amt")
                    total_amt_key=_id;
            }
            let total_amt=0;
            for(let i=0;i<this.data[this.dataField].length;i++){
                total_amt+=Number(this.data[this.dataField][i][total_amt_key])
            }
           
            if(exkey){
                let data_={};
                let ids=exkey.split(".");
                let p=ids[0];
                let id_=ids[1];
                data_.pre=p;
                data_.val=total_amt;
                data_.id=id_;
                this.$set(this.data[p],id_,total_amt);
                //this.$emit("input",JSON.stringify(data_));

            }
        },
        tableChangeData(data){
            let datas=JSON.parse(data);
            let id=datas.id;
            let val=datas.val;
            let exdata=datas.exdata;
            let index=datas.index;
            if(exdata==undefined||exdata=="undefined"){
                datas.exdata=index;
                exdata=index;
            }

            let data_=this.dataNew[this.dataField][exdata];
            let oldData=data_[id];
            data_[id]=val;
            //this.tableDataNew[exdata][id]=val;
            this.$set(this.dataNew[this.dataField],exdata,data_);

            if(id==this.groupAmt)//只有金额变更的时候才调用
                this.changeData(exdata,oldData);   
            this.changeAmt(exdata);

           /* let data_={};
            data_.pre=this.dataField;
            data_.val=JSON.stringify(this.tableDataNew[exdata]);
            data_.exdata=exdata;
            this.$emit("input",JSON.stringify(data_));*/
        },
        changeData(index,oldData){
            let temp=this.dataNew[this.dataField][index];
            let id=temp[this.groupKey];
            let amt=temp[this.groupAmt];//单价变更的时候，改变this.data里分散的信息
            for(let j=0;j<this.data[this.dataField].length;j++){
                let temp_=this.data[this.dataField][j];
                let id_=temp_[this.groupKey];
                let amt_=temp_[this.groupAmt];
                if(id==id_&&Number(amt)!=Number(amt_)&&Number(oldData)==Number(amt_)){
                    let num_=temp_[this.groupNum];
                    let totalAmt=Number(num_)*amt;
                    this.data[this.dataField][j][this.groupAmt]=amt;
                    this.data[this.dataField][j][this.groupTotalAmt]=totalAmt;
                }
            }
        },
        addItem(data){
           
                
        },
        removeItem(index){
          //  this.tableDataNew.splice(index,1);
            let dId=this.dataNew[this.dataField][index][this.groupKey];
            let amt=this.dataNew[this.dataField][index][this.groupAmt];
            //查找被删除的服务项目
            let isOk=true;
            while(isOk){
                let index=-1;
                for(let i=0;i<this.data[this.dataField].length;i++){
                    let temp=this.data[this.dataField][i];
                    let id=temp[this.groupKey];
                    let amt_=temp[this.groupAmt];
                    if(dId==id&&Number(amt)==Number(amt_)){
                        index=i;
                        break;
                    }
                }
                if(index!=-1){
                    this.data[this.dataField].splice(index,1);
                }else{
                    isOk=false;
                }
            }
            
            this.$delete(this.dataNew[this.dataField],index);
           
            this.changeTotalAmt();
           // this.$emit("remove",JSON.stringify(data));
            //console.log(this.tableDataNew)

        },
        getData(){
            return this.data[this.dataField];
        }
        
    },
    computed:{
        /*dataList:function(){
            return this.data[this.dataField];
        }*/
    },
    watch:{
        /*data:{
            handler: function (newVal) {
                console.log("datagroup=============================");
                console.log(this.data)
                this.initData();
            },
            deep: true    //深度监听
         }*/
    }
}
</script>
<style scoped>
    table{
        width:100%;
        border-collapse: collapse;
    }
    th{
        border:1px solid #409EFF;
        padding:5px;
        background:#409EFF;
        color:#fff;
        
    }
    td{
        border:1px solid #ddd;
    }
    input{
        border:0;
    }
    .tablesss{
        flex:1;
    }
    .el-table{
        flex:1;
    }
    .tableEdit{
        
        overflow:hidden;
        display:flex;
        flex-direction: column;
        height:100%;
        text-align:left;
    }
</style>